feat: Add Empty Component #422

wyMinLwin · 2025-10-24T15:52:11Z

Empty Component

Added empty component for issue #418

Summary by CodeRabbit

New Features
- Adds an "8‑bit Empty" empty-state UI with header, media (icon/variant), title, description, content and action areas, plus retro font styling and usage variants.
Documentation
- Adds a demo/docs page with metadata, OpenGraph image, installation commands, usage examples, code snippets, copy-command button, live preview and share actions.
Chores
- Registers the new component in the public registry, adds a navigation entry, and exports a new metadata asset for the component.

vercel · 2025-10-24T15:52:15Z

@wyMinLwin is attempting to deploy a commit to the 8bitcn Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-10-24T15:52:38Z

Walkthrough

Adds a new 8‑bit Empty UI (presentational components), a docs/demo Next.js page with page-level metadata and usage examples, registry and public manifest entries, a nav item for the component, and an exported image metadata constant.

Changes

Cohort / File(s)	Summary
Empty UI Component Module `components/ui/8bit/empty.tsx`	New presentational components: `Empty`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`, `EmptyDescription`, `EmptyContent`. Implements CVA variants, `cn` for class composition, `data-slot` attributes, conditional decorative overlays, and a `font` prop with a `retro` variant.
Empty Documentation Page `app/docs/components/empty/page.tsx`	New Next.js docs/demo page exporting `metadata` and default `EmptyPage`. Renders header, copy-command button, installation commands, `OpenInV0Button`, code snippets, and a live preview card demonstrating the 8‑bit Empty components.
Navigation & Asset Metadata `config/nav-items.ts`, `lib/metadata.ts`	Adds an "Empty" nav item under Components with `new: true`; exports `emptyMetaData` constant pointing to `/assets/8bitcn-empty-light.png`.
Public Registry & Manifest `public/r/empty.json`, `public/r/registry.json`, `registry.json`	Adds registry entries for the "empty" component mapping to `components/ui/8bit/empty.tsx`, includes file content/target in `public/r/empty.json`, and extends registry manifests with the new component metadata and file references.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Browser
  participant DocsPage as /app/docs/components/empty/page
  participant EmptyComp as components/ui/8bit/empty

  rect `#f6fbff`
    Browser->>DocsPage: GET /docs/components/empty
    DocsPage->>EmptyComp: import Empty components + metadata
    DocsPage->>EmptyComp: render <Empty> with slots (Header, Media, Title, Description, Content)
    EmptyComp-->>DocsPage: composed preview DOM
  end

  rect `#f0fff4`
    DocsPage-->>Browser: deliver docs page with live preview, installation commands, and code snippets
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Potential attention points:

components/ui/8bit/empty.tsx — CVA variant definitions, data-slot attributes, and conditional decorative overlays.
app/docs/components/empty/page.tsx — Next.js metadata export shape and server/client rendering boundaries.
Manifest files (public/r/empty.json, public/r/registry.json, registry.json) — path/target consistency and schema correctness.

Possibly related PRs

Feat/getting started page #340 — Also modifies config/nav-items.ts; related to adding or reordering component nav entries.
feat(nav-items) add new tag to navigation menu #204 — Similar changes to config/nav-items.ts marking components as new; related to nav metadata.
feat: add registry.json #332 — Updates registry manifests; related to adding public registry entries and component mappings.

Suggested reviewers

TheOrcDev

Poem

🐇 I hopped in with pixels bright,
Tiny blocks in retro light,
A header, icon, title snug,
Buttons click — a playful hug,
Code carrots crunch — delight!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: Add Empty Component' directly and clearly describes the main change - adding a new Empty component to the UI library.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a5f89a and f9f0bf9.

📒 Files selected for processing (2)

components/ui/8bit/empty.tsx (1 hunks)
public/r/empty.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

public/r/empty.json
components/ui/8bit/empty.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 6

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dd32523 and 95d8bac.

⛔ Files ignored due to path filters (2)

public/assets/8bitcn-empty-dark.png is excluded by !**/*.png
public/assets/8bitcn-empty-light.png is excluded by !**/*.png

📒 Files selected for processing (4)

app/docs/components/empty/page.tsx (1 hunks)
components/ui/8bit/empty.tsx (1 hunks)
config/nav-items.ts (1 hunks)
lib/metadata.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

app/docs/components/empty/page.tsx (5)

lib/metadata.ts (1)

emptyMetaData (63-63)

app/docs/components/copy-command-button.tsx (1)

CopyCommandButton (13-37)

app/docs/components/open-in-v0-button.tsx (1)

OpenInV0Button (5-39)

app/docs/components/installation-commands.tsx (1)

InstallationCommands (15-124)

app/docs/components/code-snippet.tsx (1)

CodeSnippet (94-142)

components/ui/8bit/empty.tsx (1)

lib/utils.ts (1)

cn (4-6)

🔇 Additional comments (5)

lib/metadata.ts (1)

63-63: LGTM!

The metadata export follows the established pattern and naming convention used by all other component metadata in this file.

app/docs/components/empty/page.tsx (2)

1-29: LGTM!

The imports and metadata configuration are properly structured and follow the established pattern for component documentation pages.

31-119: Well-structured documentation page.

The page component follows the established documentation pattern with a clear preview section, installation commands, and usage examples.

components/ui/8bit/empty.tsx (1)

119-126: LGTM!

All components are properly exported and the export order is logical.

config/nav-items.ts (1)

82-86: LGTM!

The navigation item addition follows the established pattern and is correctly configured with the new: true flag to highlight this as a new component. The placement in the array doesn't affect the final order since the components are sorted alphabetically on line 252.

app/docs/components/empty/page.tsx

components/ui/8bit/empty.tsx

TheOrcDev · 2025-10-31T23:41:13Z

Hey there! Thanks for this contribution! Sorry I don't know how I missed it.

Please run pnpm registry:build and push the build for the registry so I can test it out properly.

Thank you!

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 10e08eb and 0a5f89a.

📒 Files selected for processing (3)

public/r/empty.json (1 hunks)
public/r/registry.json (1 hunks)
registry.json (1 hunks)

🔇 Additional comments (2)

registry.json (1)

1826-1839: Registry entry structure is sound.

The "empty" component is properly registered with no dependencies, matching the pattern of other presentational 8-bit components like spinner and kbd.

public/r/registry.json (1)

1826-1839: Public registry entry mirrors main registry.

The entry is consistent with registry.json, maintaining proper alignment across both registry files.

public/r/empty.json

wyMinLwin · 2025-11-07T07:14:13Z

I have done adding registry and running pnpm registry:build

wyMinLwin · 2025-11-08T05:51:13Z

@TheOrcDev I have done everything to be ready. Mentioned you in case you missed this time again.

TheOrcDev

I love it! Thank you for this one!

feat: Add Empty Component (TheOrcDev#422) * feat: Add Empty Component * fix: remove unncessary code * refactor: Refactor issue in Empty * refactor: font props * chore: Empty Registry * refactor: change != to !==

* feat: Item Component * refactor: fix issues for item component * refactor: refactor item props * refactor: remove sperator from codebase * chore: resolved merge conflits feat: Add Empty Component (#422) * feat: Add Empty Component * fix: remove unncessary code * refactor: Refactor issue in Empty * refactor: font props * chore: Empty Registry * refactor: change != to !== * feat: Item Component * chore: resolved merge confilts

feat: Add Empty Component

95d8bac

wyMinLwin requested a review from TheOrcDev as a code owner October 24, 2025 15:52

coderabbitai bot reviewed Oct 24, 2025

View reviewed changes

wyMinLwin added 3 commits October 25, 2025 01:54

fix: remove unncessary code

0000365

refactor: Refactor issue in Empty

237646c

refactor: font props

10e08eb

wyMinLwin mentioned this pull request Oct 25, 2025

Empty #418

Closed

chore: Empty Registry

0a5f89a

coderabbitai bot reviewed Nov 7, 2025

View reviewed changes

public/r/empty.json Show resolved Hide resolved

refactor: change != to !==

f9f0bf9

TheOrcDev approved these changes Nov 8, 2025

View reviewed changes

TheOrcDev merged commit 832d261 into TheOrcDev:main Nov 8, 2025
1 of 2 checks passed

coderabbitai bot mentioned this pull request Nov 8, 2025

feat: Item Component #431

Merged

Uh oh!

feat: Add Empty Component #422

feat: Add Empty Component #422

Uh oh!

Conversation

wyMinLwin commented Oct 24, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Empty Component

Summary by CodeRabbit

Uh oh!

vercel bot commented Oct 24, 2025

Uh oh!

coderabbitai bot commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TheOrcDev commented Oct 31, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wyMinLwin commented Nov 7, 2025

Uh oh!

wyMinLwin commented Nov 8, 2025

Uh oh!

TheOrcDev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wyMinLwin commented Oct 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2025 •

edited

Loading